<template>
  <div class="screenshots_list_box fadeInRight">
    <div class="screenshots_sit">
      <header>
        <span>专题制图</span>
        <img
          class="add_screenshot_btn"
          title="添加专题图"
          src="/images/screenshots/screenshotsAdd.png"
          @click="addScreenshot"
        />
        <img class="close" src="/images/sit/收缩 (1).png" alt @click="close" />
      </header>
      <div class="screenshots">
        <el-tree
          draggable
          :data="allScreenshots"
          :props="defaultProps"
          :render-content="renderContent"
          :allow-drop="dropRestrictions"
          @node-drop="dropSuccessFun"
        ></el-tree>
      </div>
      <div class="hide_box">{{isChange}}</div>
      <!--			<el-button style="font-size: 12px;" type="text" on-click={ () => this.updateScreenshots(node, data) }>update</el-button>-->
      <!--			<el-button style="font-size: 12px;" type="text" on-click={ () => this.deleteScreenshots(node, data) }>delete</el-button>-->
    </div>
    <Dialog v-show="tipShow">
      <div class="tipText">确定删除 {{picTitle}} 吗？</div>
      <el-row class="buttonBox" style=" text-align: right; margin-top: 20px;">
        <el-button @click="deleteScreenshots(currentNode,currentData)">确定</el-button>
        <el-button @click="closeTip">取消</el-button>
      </el-row>
    </Dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Dialog from "./Dialog";
export default {
  components: {
    Dialog
  },
  name: "screenshotsList",
  data() {
    return {
      allScreenshots: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tipShow: false,
      picTitle: null,
      currentNode: null,
      currentData: null
    };
  },
  methods: {
    //专题图的列表查询
    async getScreenshotsList() {
      let screenList = await this.$get("/wuhao/tmc/all");
      console.log(screenList);
      let parentIds = {};
      screenList.forEach((item, index) => {
        let eleNode = {};
        eleNode.label = item.title;
        eleNode.id = item.id;
        if (item.req) {
          let parentName = item.req.name;
          if (!parentIds[parentName]) {
            parentIds[parentName] = {};
            parentIds[parentName].label = parentName;
            parentIds[parentName].id = item.urgentReqId;
            parentIds[parentName].children = [];
          }
          parentIds[parentName].children.push(eleNode);
        } else {
          if (!parentIds.other) {
            parentIds.other = {};
            parentIds.other.label = "其他";
            parentIds.other.children = [];
          }
          parentIds.other.children.push(eleNode);
        }
      });
      let resultArr = [];
      for (let key in parentIds) {
        resultArr.push(parentIds[key]);
      }
      this.allScreenshots = resultArr;
    },
    //关闭列表面板
    close() {
      this.$emit("close");
      $(".screenshots_list_box").hide();
    },
    //添加专题图的入口
    addScreenshot() {
      let screenshots = this.$store.getters.screenshots;
      screenshots.isShowScreenshots = true;
      screenshots.updateId = "";
    },
    //修改专题图入口
    updateScreenshots(node, data) {
      let screenshots = this.$store.getters.screenshots;
      screenshots.isShowScreenshots = true;
      screenshots.updateId = data.id;
    },
    openTips(node, data) {
      this.picTitle = data.label;
      this.currentData = data;
      this.currentNode = node;
      this.tipShow = true;
    },
    closeTip() {
      this.tipShow = false;
    },
    //删除单条专题图
    async deleteScreenshots(node, data) {
      await this.$get("wuhao/tmc/del", {
        id: data.id
      }).then(resultData => {
        let parent = node.parent;
        let children = parent.data.children || parent.data;
        let index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        this.closeTip();
      });
    },
    renderContent(h, { node, data, store }) {
      if (!data.children) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span class="content_length_limit">
              <span title={node.label}> {node.label} </span>{" "}
            </span>{" "}
            <span>
              <img
                class="screenshot_icon"
                title="编辑专题图"
                src="/images/screenshots/screenshotsupdate.png"
                on-click={() => this.updateScreenshots(node, data)}
              />{" "}
              <img
                class="screenshot_icon"
                title="删除专题图"
                src="/images/screenshots/screenshotsDelete.png"
                on-click={() => this.openTips(node, data)}
              />{" "}
            </span>{" "}
          </span>
        );
      } else {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span> {node.label} </span>{" "}
            </span>{" "}
            <span></span>{" "}
          </span>
        );
      }
    },
    dropRestrictions(moveNode, inNode, type) {
      if (moveNode.level == 1 || inNode.level == 2) {
        return false;
      } else {
        return "inner" == type;
      }
    },
    dropSuccessFun(a, b, c, d) {
      let id = a.data.id;
      let newParentId = b.data.id;
      if (!newParentId) {
        newParentId = 0;
      }
      this.UpdateFileAssociated(id, newParentId);
      return true;
    },
    //专题图的列表查询
    async UpdateFileAssociated(id, newParentId) {
      console.log(id + "  " + newParentId);
      let a = this.$get("wuhao/tmc/upd/req", {
        id: id,
        newReq: newParentId
      });
      if (a.status == 200) {
        console.log("成功");
      }
    }
  },
  computed: {
    ...mapState({
      isChange: function(state) {
        if (!state.screenshots.isShowScreenshots) {
          this.getScreenshotsList();
        }
      }
    })
  },
  mounted() {
    this.getScreenshotsList();
  }
};
</script>
<style lang="scss">
.screenshots_header {
  position: fixed;
  width: 100%;
  height: 8%;
  background-color: rgba(236, 232, 228, 1);
  top: 0px;
  left: 0px;
}
.screenshots_left {
  position: fixed;
  top: 8%;
  left: 0px;
  width: 3%;
  height: 80%;
  background-color: rgba(236, 232, 228, 1);
}
.screenshots_right {
  position: fixed;
  top: 8%;
  right: 0px;
  width: 3%;
  height: 80%;
  background-color: rgba(236, 232, 228, 1);
}
.screenshots_center_bottom {
  position: fixed;
  top: 88%;
  left: 0px;
  width: 100%;
  height: 7%;
  background-color: rgba(236, 232, 228, 1);
}
.screenshots_bottom {
  position: fixed;
  top: 95%;
  left: 0px;
  width: 100%;
  height: 5%;
  background-color: #000;
}
.screenshots_static_btn {
  position: absolute;
  right: 60px;
  bottom: 10px;
}
.screenshots_static_info {
  color: #000;
  margin-top: 9px;
  margin-left: 58px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
}
.screenshots_static_info .screenshots_static_input {
  position: absolute;
  top: 4px;
  width: 80%;
}
.screenshots_static_info .screenshots_static_input input {
  border: 0px !important;
  background: #ece8e4;
  padding-left: 5px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
  color: #000;
}
.screenshots_static_info .dis_text_div {
  display: inline;
  background: #ece8e4;
  padding-left: 5px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
  color: #000;
}
.screenshots_static_time {
  display: inline-block;
  position: absolute;
  right: -24px;
  font-size: 16px;
  color: #000;
  top: 0px;
  letter-spacing: 5px;
}
.screenshots_static_time .el-input__inner {
  border: 0px !important;
  background: #ece8e4;
  font-size: 16px;
  padding-left: 0px;
  letter-spacing: 2px;
  color: #000;
}
.screenshots_header .el-input {
  width: 100% !important;
}
.screenshots_header .el-input input {
  display: inline-block;
  width: 94%;
  height: 51px;
  background: #ece8e4;
  border-radius: 2px;
  margin-left: 3%;
  margin-top: 14px;
  text-align: center;
  font-size: 28px;
  border: 0px !important;
  letter-spacing: 16px;
  text-indent: 16px;
  font-family: none;
  font-weight: 600;
  color: #000;
}
.screenshots_header .dis_title_div {
  display: inline-block;
  width: 94%;
  height: 51px;
  background: #ece8e4;
  border-radius: 2px;
  margin-left: 3%;
  margin-top: -6px;
  text-align: center;
  font-size: 28px;
  border: 0px !important;
  letter-spacing: 16px;
  text-indent: 16px;
  font-family: none;
  font-weight: 600;
  color: #000;
}
.screenshots_static_time .el-icon-circle-close,
.screenshots_static_time .el-input__icon {
  display: none;
}
.screenshots_list_box {
  z-index: 10;
  position: absolute;
  overflow: hidden;
  height: 870px;
  animation-duration: 0.5s;
  position: absolute;
  right: 89px;
  top: 113px;
}
.screenshots_list_box .screenshots_sit {
  background-image: url("/images/left-bg.png");
  background-size: 100% 100%;
  width: 329px;
  height: 100%;
  box-sizing: border-box;
  margin-right: 20px;
}
.screenshots_list_box .screenshots_sit header {
  height: 35px;
  background-image: url("/images/line.png");
  background-size: 100% 100%;
}
.screenshots_list_box .screenshots_sit header span {
  font-size: 16px;
  font-weight: 500;
  margin-left: 20px;
  color: #fff;
}

.screenshots_list_box header {
  width: 100%;
  font-size: 0.2rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #2fd5ff;
  text-align: left;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.screenshots_list_box .screenshots {
  overflow: auto;
  height: 95%;
}
.add_screenshot_btn {
  margin-right: -134px;
  cursor: pointer;
  width: 22px;
}
.screenshots_update_btn {
  position: relative;
  left: 168px;
}
.screenshots_task_btn {
  font-size: 15px;
  color: #a3a3a3;
  position: relative;
  top: 32px;
  left: -217px;
}
.screenshots_task_btn .el-input__inner {
  height: 30px;
}
.screenshots_task_btn .el-input__suffix {
  height: 121% !important;
}
.screenshots_task_btn .el-select-dropdown {
  background-color: #fff;
}
.hide_box {
  display: none;
}
.screenshot_icon {
  cursor: pointer;
  width: 22px;
  margin-right: 6px;
}
.boder_loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
}
.loadding_inf {
  position: relative;
  top: 46%;
  left: 50%;
  color: #3d8ad9;
}
.loadding_inf div {
  position: relative;
  left: -2%;
}
.hide_class {
  display: none !important;
}
.content_length_limit {
  width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.close {
  position: relative;
  right: 11px;
  cursor: pointer;
}
</style>